<template>
  <view v-show="props.i === props.index">
    <!-- 分类区域 -->
    <down-bar :params="props.params" @search="search"></down-bar>

    <mescroll-body :ref="'mescrollRef'+i" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
      :up="upOption">
      <!-- 数据列表 -->
      <view style="padding: 0 20rpx;box-sizing: border-box;">
        <!-- <course-item v-for="item in courseList" :item="item" :key="item.id"></course-item> -->
        <!-- <view class="" v-for="i in 50" :key="i">
          {{i}}
        </view> -->
      </view>
    </mescroll-body>
  </view>
</template>

<script setup lang="ts">
  import downBar from './down-bar.vue'
  import {
    reactive,
    getCurrentInstance
  } from 'vue'
  const {
    proxy
  } = getCurrentInstance()
  const props = defineProps({
    params: {
      type: Object,
      default: null
    },
    inputContent: {
      type: String,
      default: ''
    },
    i: Number,
    index: {
      type: Number,
      default () {
        return 0
      }
    }
  })
  const downOption = reactive({ //下拉刷新参数
    offset: 60
  })
  const upOption = reactive({ //上拉加载参数
    page: {
      num: 0, //默认第零页，每次调用upCallback，num+1
      size: 10
    }
  })
  const search = (condition) => {
    // console.log("查询条件：", condition);
    proxy.mescroll.resetUpScroll()
  }
  const upCallback = (page) => {
    console.log('文章列表upcallback', page.num, page.size);
    proxy.mescroll.endSuccess(0)
  }
  defineExpose({
    search
  })
</script>
<style>
</style>
